<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="计划单号" prop="danhao">
        <el-input
          v-model="queryParams.danhao"
          placeholder="请输入计划单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物料名称" prop="itemName">
        <el-input
          v-model="queryParams.itemName"
          placeholder="请输入物料名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物料编号" prop="itemId">
        <el-input
          v-model="queryParams.itemId"
          placeholder="请输入物料编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="规格型号" prop="spec">
        <el-input
          v-model="queryParams.spec"
          placeholder="请输入规格型号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="供应商" prop="supplyId">
        <el-input
          v-model="queryParams.supplyId"
          placeholder="请输入供应商"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="合同编号" prop="contractCode">
        <el-input
          v-model="queryParams.contractCode"
          placeholder="请输入合同编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['business:purchaseInfo:add']"
        >新增采购计划</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['business:purchaseInfo:import']"
        >导入采购计划</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleApply "
          :disabled="multiple"
          v-hasPermi="['business:purchaseInfo:apply']"
        >采购单申请</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['business:purchaseInfo:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['business:purchaseInfo:remove']"
        >删除</el-button>
      </el-col>
      <!--<el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="printt"
          v-print="printCg"
        >执行</el-button>
      </el-col>-->
     <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-printer"
          size="mini"
          @click="printCgd"
          v-hasPermi="['business:purchaseInfo:export']"
        >打印审批单</el-button>
      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-printer"
          size="mini"
          @click="printSpd"
          v-hasPermi="['business:purchaseInfo:export']"
        >打印申请单</el-button>
      </el-col>


      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['business:purchaseInfo:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="purchaseInfoList"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="公司名称" align="center" prop="factoryName" />
      <el-table-column label="公司代码" align="center" prop="factoryCode" />
      <el-table-column label="采购人" align="center" prop="cgName" />
      <el-table-column label="收货部门" align="center" prop="deptId" />
      <el-table-column label="要货单位" width="180" show-overflow-tooltip align="center" prop="yhCompany" />
      <el-table-column label="计划单号" width="160" align="center" prop="danhao" />
      <el-table-column label="项目订单号" width="150" align="center" prop="asnDanhao" />
      <el-table-column label="物料编号" width="130" align="center" prop="itemId" />
      <el-table-column label="子图号" width="130" align="center" prop="itemCode" />
      <el-table-column label="物料名称" width="130" show-overflow-tooltip align="center" prop="itemName" />
      <el-table-column label="规格型号" width="220" show-overflow-tooltip align="center" prop="spec" />
      <el-table-column label="物料单位" align="center" prop="unit" />
<!--      <el-table-column label="条码号" width="130"  align="center" prop="txm" />-->
      <el-table-column label="供应商编号" width="130" align="center" prop="supplyId" />
      <el-table-column label="供应商名称"  width="130" show-overflow-tooltip align="center" prop="supplyName" />
     <!-- <el-table-column label="制造商编码" width="130"  align="center" prop="makerCode" />
      <el-table-column label="制造商名称" width="130" show-overflow-tooltip align="center" prop="makerName" />-->
<!--      <el-table-column label="合同数量" align="center" prop="contractNum" />-->
    <!--  <el-table-column label="合同份额" align="center" prop="contractShare" />-->
<!--      <el-table-column label="要货单号" width="140" align="center" prop="yhDanhao" />-->
   <!--   <el-table-column label="计划单价" align="center" prop="jhUnitPrice" />
      <el-table-column label="计划总价" align="center" prop="jhTotalPrice" />-->
      <el-table-column label="采购单价" align="center" prop="unitPrice" />
      <el-table-column label="要货数量" align="center" prop="yhNum" />
      <el-table-column label="采购总价" align="center" prop="totalPrice" />
      <el-table-column label="订单数量" align="center" prop="yddNum" />
      <el-table-column label="往采数量" align="center" prop="shNum" />
      <el-table-column label="包装数量" align="center" prop="packingNum" />
      <el-table-column label="超出数量" align="center" prop="jhUnitPrice" />
      <el-table-column label="入库数量" align="center" prop="rkNum" />
      <el-table-column label="合同编号" width="140" align="center" prop="contractCode" />
      <el-table-column label="物料类型编号" width="130" align="center" prop="classId" />
      <el-table-column label="物料类型名称" width="130" show-overflow-tooltip align="center" prop="className" />
      <el-table-column label="要货类型" align="center" show-overflow-tooltip prop="yhType" />
<!--      <el-table-column label="物流单位" show-overflow-tooltip align="center" prop="wlCompany" />-->
      <el-table-column label="要货时间" align="center" prop="yhTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.yhTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审批流编码" width="130" align="center" prop="spCode" />
      <el-table-column label="审批流名称" width="130" align="center" prop="spName" />
      <el-table-column label="审批状态" align="center" prop="isSp" width="100" fixed="right">
        <template slot-scope="scope">
          <span v-if="scope.row.isSp=='0'">未审批</span>
          <span v-if="scope.row.isSp=='1'" style="color: red">已审批</span>
        </template>
      </el-table-column>
      <!--
       <el-table-column label="托管属性" align="center" prop="isTuoguan" />

       <el-table-column label="合格数量" align="center" prop="hgNum" />
      <el-table-column label="退货数量" align="center" prop="thNum" />
       <el-table-column label="订货单位" align="center" prop="dhCompany" />
       <el-table-column label="订货仓库" width="130" show-overflow-tooltip align="center" prop="dhStock" />
       <el-table-column label="收货人"  align="center" prop="shName" />
       <el-table-column label="收货位" align="center" prop="shKuwei" />
       <el-table-column label="收货地址" width="130" show-overflow-tooltip align="center" prop="shAddress" />
       <el-table-column label="供货单位" width="130" show-overflow-tooltip align="center" prop="ghCompany" />
       <el-table-column label="供货周期" align="center" prop="ghDate" />
       <el-table-column label="供货地址" width="130" show-overflow-tooltip align="center" prop="ghAddress" />
       <el-table-column label="生产周期" align="center" prop="scDate" />
       <el-table-column label="供应商运输距离" align="center" prop="gysYsjl" />
       <el-table-column label="供应商运输时间" align="center" prop="gysYssj" />
       <el-table-column label="月订单数量" align="center" prop="yddNum" />
       <el-table-column label="月完成数量" align="center" prop="ywcNum" />
       <el-table-column label="月度供货未完成比率" align="center" prop="yghwcbl" />
       <el-table-column label="单箱容量" align="center" prop="dxrl" />-->
     <!-- <el-table-column label="年度采购计划号" align="center" prop="ncgPlanId" />
      <el-table-column label="年度采购计划数量" align="center" prop="ncgPlanNum" />
      <el-table-column label="季度采购计划号" align="center" prop="jcgPlanId" />
      <el-table-column label="季度采购计划数量" align="center" prop="jcgPlanNum" />
      <el-table-column label="月度采购计划号" align="center" prop="ycgPlanId" />
      <el-table-column label="月度采购计划数量" align="center" prop="ycgPlanNum" />
      <el-table-column label="临时采购计划号" align="center" prop="lscgPlanId" />
      <el-table-column label="临时采购计划数量" align="center" prop="lscgPlanNum" />
      <el-table-column label="尺寸" align="center" prop="size" />
      <el-table-column label="单重" align="center" prop="singleWeight" />
      <el-table-column label="总重" align="center" prop="totalWeight" />
      <el-table-column label="入库时间" align="center" prop="rukuDate" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.rukuDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="库存上限" align="center" prop="upLine" />
      <el-table-column label="库存下限" align="center" prop="downLine" />
      <el-table-column label="安全库存" align="center" prop="stockSafe" />
      <el-table-column label="使用状态" align="center" prop="useState" />
      <el-table-column label="颜色" align="center" prop="color" />
      <el-table-column label="花纹" align="center" prop="figure" />
      <el-table-column label="材质" align="center" prop="caizhi" />
      <el-table-column label="是否呆滞" align="center" prop="isDaizhi" />
      <el-table-column label="包装数量" align="center" prop="packingNum" />
      <el-table-column label="包装尺寸" align="center" prop="packingSize" />
      <el-table-column label="包装材质" align="center" prop="packingCaizhi" />-->
      <el-table-column label="备注" align="center" prop="remark" />

      <el-table-column label="操作" width="180" fixed="right" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-claim"
            @click="handleHt(scope.row)"
            v-if="scope.row.shenhFlag != 0 && scope.row.contractCode==null"
            v-hasPermi="['business:purchaseInfo:htsc']"
          >生成采购合同</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-check"
            @click="handleShenPi(scope.row)"
            v-if="scope.row.shenhFlag != 1"
            v-hasPermi="['business:purchaseInfo:shenpi']"
          >审批</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-if="scope.row.shenhFlag != 1"
            v-hasPermi="['business:purchaseInfo:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-if="scope.row.shenhFlag != 1"
            v-hasPermi="['business:purchaseInfo:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改采购单对话框 -->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="1550px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" style="margin-top: -25px" label-width="130px">
        <!--<el-row>
          <el-col :span="8">
            <el-form-item label="合同编号" prop="contractCode">
              <el-input v-model="form.contractCode" placeholder="请输入合同编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同数量" prop="contractNum">
              <el-input v-model="form.contractNum" placeholder="请输入合同数量" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同份额" prop="contractShare">
              <el-input v-model="form.contractShare" placeholder="请输入合同份额" />
            </el-form-item>
          </el-col>
        </el-row>-->
        <el-row>
          <el-col :span="8">
            <el-form-item label="要货单位" prop="yhCompany">
              <el-input v-model="form.yhCompany" placeholder="请输入要货单位" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="要货时间" prop="yhTime">
              <el-date-picker clearable
                              v-model="form.yhTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择要货时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="要货类型" prop="yhType">
              <el-select v-model="form.yhType" placeholder="请选择要货类型" clearable>
                <el-option
                  v-for="dict in dict.type.pur_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="项目订货单号" prop="asnDanhao">
              <el-input v-model="form.asnDanhao" placeholder="请输入项目订货单号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购人" prop="cgName">
              <el-input v-model="form.cgName" placeholder="请输入采购人" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货部门" prop="deptId">
              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择收货部门" />
            </el-form-item>
          </el-col>
         <!-- <el-col :span="8">
          <el-form-item label="备注" prop="remark">
            <el-input  type="textarea" v-model="form.remark" placeholder="请输入备注" />
          </el-form-item>
          </el-col>-->
        </el-row>

        <!--<el-row>
          <el-col :span="8">
            <el-form-item label="供货单位" prop="ghCompany">
              <el-input v-model="form.ghCompany" placeholder="请输入供货单位" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供货周期" prop="ghDate">
              <el-input v-model="form.ghDate" placeholder="请输入供货周期" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供货地址" prop="ghAddress">
              <el-input v-model="form.ghAddress" placeholder="请输入供货地址" />
            </el-form-item>
          </el-col>
        </el-row>-->
        <!--<el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="供应商运输距离" prop="gysYsjl">
                <el-input v-model="form.gysYsjl" placeholder="请输入供应商运输距离" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商运输时间" prop="gysYssj">
                <el-input v-model="form.gysYssj" placeholder="请输入供应商运输时间" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物流单位" prop="wlCompany">
                <el-input v-model="form.wlCompany" placeholder="请输入物流单位" />
              </el-form-item>
            </el-col>
          </el-row>-->
         <!-- <el-col :span="8">
            <el-form-item label="收货位" prop="shKuwei">
              <el-input v-model="form.shKuwei" placeholder="请输入收货位" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货地址" prop="shAddress">
              <el-input v-model="form.shAddress" placeholder="请输入收货地址" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货人" prop="shName">
              <el-input v-model="form.shName" placeholder="请输入收货人" />
            </el-form-item>
          </el-col>
        </el-row>-->
        <!--<el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input style="width: 500px"  type="textarea" v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>-->
        <el-row>
          <el-col :span="24">
            <PurchaseInfoAdd ref="purchaseInfoAdd"></PurchaseInfoAdd>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!---->
    <el-dialog :close-on-click-modal="false" :title="apply.title" :visible.sync="apply.open" width="1500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="审批流" prop="spCode">
          <el-select @change="getSp" v-model="form.spCode" placeholder="请选择审批流" clearable>
            <el-option
              v-for="dict in dictSp"
              :key="dict.spCode"
              :label="dict.spName"
              :value="dict.spCode">
              <span style="float: left">{{ dict.spName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.spCode }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <PurchaseInfoApply ref="purchaseInfoApply"></PurchaseInfoApply>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitApplyForm">确 定</el-button>
        <el-button @click="apply.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改采购单对话框 -->
    <el-dialog :close-on-click-modal="false" :title="shenh.title" :visible.sync="shenh.open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="审批状态" prop="shenhState">
          <el-radio v-model="form.shenhState" label="1">同意</el-radio>
          <el-radio v-model="form.shenhState" label="0">不同意</el-radio>
        </el-form-item>
          <el-form-item label="审批意见" prop="shenhRemak">
            <el-input style="width: 500px"  type="textarea" v-model="form.shenhRemak" placeholder="请输入审批意见" />
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitShenPiForm">确 定</el-button>
        <el-button @click="shenh.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 生成合同 -->
    <el-dialog :close-on-click-modal="false" :title="ht.title" :visible.sync="ht.open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" style="margin-top: -25px" label-width="120px">
        <el-form-item label="合同数量" prop="contractNum">
          <el-input v-model="form.contractNum" placeholder="请输入合同数量" />
        </el-form-item>
      <!--  <el-form-item label="合同份额" prop="contractShare">
          <el-input v-model="form.contractShare" placeholder="请输入合同份额" />
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitHtForm">确 定</el-button>
        <el-button @click="ht.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <div style="display: none">
      <div id="printBill" ref="printBill" style="height: 700px;padding-top:10px;width: 100%;">
        <div style="width: 96%;margin: 0 auto">
          <div id="title" style="width: 100%;height: 30px;line-height: 30px;text-align: center;fontSize: 30px">采购审批单</div>
          <div style="margin-top:15px">甲方：泰康锻造股份有限公司</div>
<!--          <div>乙方：{{info2.clientName}}</div>-->
          <div>采购单号：{{info.danhao}}</div>
          <div style="float:right;color:red">{{info.contractQdDate}}</div>
          <div style="margin-top:40px">甲方给乙方供应法兰，尺寸、价格如下：</div>
          <table  border="1" style="width: 100%;">
            <tr>
              <th>品名</th>
              <th>规格</th>
              <th>数量</th>
              <th>单价</th>
              <th>合计</th>
              <th>备注</th>
            </tr>
            <tr>
              <td>{{info.itemName}}</td>
              <td>{{info.spec}}</td>
              <td>{{info.yhNum}}</td>
              <td>{{info.unitPrice}}</td>
              <td>{{info.totalPrice}}</td>
              <td>{{info.remark}}</td>
            </tr>
          </table>
          <div style="display: flex;flex-direction: column;margin-top:10px">
<!--            <div>{{info.remark}}</div>-->
          </div>
          <div style="width: 100%;display: flex;margin-top:40px">
            <div style="width: 52%;float: left">
              <div>甲方：济南泰康锻造股份有限公司</div>
              <div>账户：153333688</div>
              <div>开户行：中国民生银行股份有限公司济南章丘支行</div>
              <div>地址：山东省济南市章丘区普集街道办事处西洼村村南</div>
              <div>电话：18615239566</div>
            </div>
            <div style="width: 48%;float: left;margin-left:15px">
<!--              <div>乙方：{{info2.clientName}}</div>-->
<!--              <div>账户：{{info2.clientAcc}}</div>-->
<!--              <div>开户行：{{info2.clientBank}}</div>-->
<!--              <div>地址：{{info2.clientAdress}}</div>-->
<!--              <div>电话：{{info2.clientPhone}}</div>-->
            </div>
          </div>
        </div>
      </div>
    </div>


    <div style="width: 100%;display: none">
      <div style="width: 100%;text-align: center;page-break-after: always;height: 200px" class="cght" ref="cght">
        <div style="width: 96%;margin: 0 auto">
          <div ref="cghttm1" style="position: fixed;right: 30px;top:10px"></div>
          <div style="width: 100%;height: 100px;line-height: 100px;text-align: center;fontSize: 30px">采购审批单</div>

          <div style="display: flex;justify-content: left;margin-top:10px;margin-bottom:5px">
            <div style="width:33%;text-align: left">采购单号：{{cgForm.danhao}}</div>
            <div style="width:33%;text-align: left">采购单位：{{cgForm.yhCompany}}</div>
            <div style="width:33%;text-align: left">采购日期：{{cgForm.cgDate}}</div>
          </div>
          <table  border="1" style="width: 100%;">
            <tr>
              <th>物料名称</th>
              <th>物料号</th>
              <th>规格型号</th>
              <th>单位</th>
              <th>单价</th>
              <th>订单数量</th>
              <th>往采数量</th>
              <th>采购数量</th>
              <th>包装数量</th>
              <th>超出数量</th>
              <th>备注</th>
            </tr>
            <tr v-for="(item,index) in seles" :key="index">
              <td>{{item.itemName}}</td>
              <td>{{item.itemId}}</td>
              <td>{{item.spec}}</td>
              <td>{{item.unit}}</td>
              <td>{{item.unitPrice}}</td>
              <td>{{item.yddNum}}</td>
              <td>{{item.shNum}}</td>
              <td>{{item.yhNum}}</td>
              <td>{{item.packingNum}}</td>
              <td>{{item.jhUnitPrice}}</td>
              <td>{{item.remark}}</td>
            </tr>
          </table>
          <div style="display: flex;justify-content: left;margin-top:10px">
            <div style="width:33%;text-align: left">采购人：{{cgForm.cgName}}</div>
            <div style="width:33%;text-align: left">审核人：</div>
            <div style="width:33%;text-align: left">审批人：</div>
          </div>
        </div>
      </div>
    </div>


    <div style="width: 100%;display: none">
      <div style="width: 100%;text-align: center;page-break-after: always;height: 200px" class="cght" ref="cgsqd">
        <div style="width: 96%;margin: 0 auto">
<!--          <div ref="cghttm2" style="position: fixed;right: 30px;top:10px"></div>-->
          <div style="width: 100%;height: 100px;line-height: 100px;text-align: center;fontSize: 30px">采购申请单</div>

          <div style="display: flex;justify-content: left;margin-top:10px;margin-bottom:5px">
            <div style="width:33%;text-align: left">采购单号：{{cgForm.danhao}}</div>
            <div style="width:33%;text-align: left">采购单位：{{cgForm.yhCompany}}</div>
            <div style="width:33%;text-align: left">采购日期：{{cgForm.cgDate}}</div>
          </div>
          <table  border="1" style="width: 100%;">
            <tr>
              <th>物料名称</th>
              <th>物料号</th>
              <th>规格型号</th>
              <th>单位</th>
              <th>订单号</th>
              <th>采购数量</th>
              <th>备注</th>
            </tr>
            <tr v-for="(item,index) in seles" :key="index">
              <td>{{item.itemName}}</td>
              <td>{{item.itemId}}</td>
              <td>{{item.spec}}</td>
              <td>{{item.unit}}</td>
              <td>{{item.asnDanhao}}</td>
              <td>{{item.yhNum}}</td>
              <td>{{item.remark}}</td>
            </tr>
          </table>
          <div style="display: flex;justify-content: left;margin-top:10px">
            <div style="width:50%;text-align: left">申请人：</div>
            <div style="width:50%;text-align: left">审核人：</div>
<!--            <div style="width:33%;text-align: left">审批人：</div>-->
          </div>
        </div>
      </div>
    </div>
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="1200px" append-to-body>
      <el-form ref="form22" :model="form" :rules="rules" style="margin-top: -25px" label-width="130px">

        <el-row>
          <el-col :span="8">
            <el-form-item label="要货单位" prop="yhCompany">
              <el-input v-model="form.yhCompany" placeholder="请输入要货单位" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="要货时间" prop="yhTime">
              <el-date-picker clearable
                              v-model="form.yhTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择要货时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="要货类型" prop="yhType">
              <el-select v-model="form.yhType" placeholder="请选择要货类型" clearable>
                <el-option
                  v-for="dict in dict.type.pur_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="供应商" prop="supplyName">
              <el-select v-model="form.supplierCode" placeholder="请选择供应商" clearable>
                <el-option
                  v-for="item in suppers"
                  :key="item.supplierCode"
                  :label="item.supplierName"
                  :value="item.supplierCode">
                  <span style="float: left">{{ item.supplierName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.supplierCode }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购人" prop="cgName">
              <el-input v-model="form.cgName" placeholder="请输入采购人" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货部门" prop="deptId">
              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择收货部门" />
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <el-upload
        style="margin-left: 50px"
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :data = "this.form"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" >
          <!--  <div class="el-upload__tip" slot="tip">
              <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
            </div>-->
          <span style="margin-left: 50px">仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listPurchaseInfo, getPurchaseInfo, delPurchaseInfo, addPurchaseInfo, updatePurchaseInfo,shenpiPurchaseInfo,htScPurchaseInfo,applyPurchaseInfo} from "@/api/business/purchaseInfo";
import PurchaseInfoAdd from './purchaseInfoAdd';
import PurchaseInfoApply from './purchaseInfoApply';
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import QRCode from "qrcodejs2";
import print from 'print-js';
import {getToken} from "@/utils/auth";
import moment from "moment";
import { dictSp} from "@/api/system/sp";
import {getLiSupplier} from "@/api/supplychain/supplier";

export default {
  components: {
    PurchaseInfoAdd,PurchaseInfoApply,Treeselect
  },
  dicts: ['pur_type'],
  name: "PurchaseInfo",
  data() {
    return {
      dhs:[],
      seles:[],
      cgForm:{},
      printCg:{
        id: "printBill", // 这里是要打印元素的ID
        popTitle: "", // 打印的标题
        extraCss: "", // 打印可引入外部的一个 css 文件
        extraHead: "", // 打印头部文字
        preview:false,
        clickMounted(){
          console.log('执行了打印按钮');
        }
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      suppers: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 采购单表格数据
      purchaseInfoList: [],
      dictSp: [],
      // 部门树选项
      deptOptions: undefined,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      shenh:{
        title: "",
        // 是否显示弹出层
        open: false,
      },
      ht:{
        title: "",
        // 是否显示弹出层
        open: false,
      },
      apply:{
        title: "",
        // 是否显示弹出层
        open: false,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        danhao: null,
        yhDanhao: null,
        asnDanhao: null,
        classId: null,
        itemName: null,
        itemId: null,
        spec: null,
        supplyId: null,
        contractCode: null,
        shenhFlag: null,
      },
      upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "导入采购计划",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/business/purchaseInfo/importData"
      },
      info:{},
      // 表单参数
      form: {
        yhTime:new Date()
      },
      // 表单校验
      rules: {
        yhCompany: [
          { required: true, message: "要货单位不能为空", trigger: "blur" }
        ],
        cgName: [
          { required: true, message: "采购人不能为空", trigger: "blur" }
        ],
        yhType: [
          { required: true, message: "请选择要货类型", trigger: "blur" }
        ],
        yhTime: [
          { required: true, message: "要货时间不能为空", trigger: "blur" }
        ],
        deptId: [
          { required: true, message: "收货部门不能为空", trigger: "blur" }
        ],

      }
    };
  },
  created() {
    this.getList();
    this.getTreeselect();
  },
  methods: {
    printCgd(){
      let arr = this.dhs
      if(new Set(arr).size > 1){
        this.$message.error('所选采购单号不同！！！');
      }else{
        this.cgForm = this.seles[0]
        var date = new Date() // 获取时间
        var year = date.getFullYear() // 获取年
        var month = date.getMonth() + 1 // 获取月
        var strDate = date.getDate() // 获取日
        this.cgForm.cgDate = year +'-' +this.getNum(month) +'-' +this.getNum(strDate)
        // this.$refs.cghttm1.innerHTML = ''
        // new QRCode(this.$refs.cghttm1, {
        //     text: this.cgForm.danhao, //二维码内容
        //     width: 80,
        //     height: 80,
        //  })
        this.$nextTick(()=>{

          console.log(this.seles[0])
          this.priDan2()
        })

      }
    },
    printSpd(){
      let arr = this.dhs
      if(new Set(arr).size > 1){
        this.$message.error('所选采购单号不同！！！');
      }else{
        this.cgForm = this.seles[0]
        var date = new Date() // 获取时间
        var year = date.getFullYear() // 获取年
        var month = date.getMonth() + 1 // 获取月
        var strDate = date.getDate() // 获取日
        this.cgForm.cgDate = year +'-' +this.getNum(month) +'-' +this.getNum(strDate)
        // this.$refs.cghttm2.innerHTML = ''
        // new QRCode(this.$refs.cghttm2, {
        //   text: this.cgForm.danhao, //二维码内容
        //   width: 80,
        //   height: 80,
        // })
        this.$nextTick(()=>{

          console.log(this.seles[0])
          this.priDan3()
        })

      }
    },
    getNum(i) {
      return i < 10 ? '0' + i : i
    },

    priDan2(){
      // this.$printPage(this.$refs.printDan2)
      const style = '@page { margin:10px 0 0 0 } ' +'@media print { #title{ font-size:12px};#title1{ font-size:12px };.name{font-size:10px}  }' ;
      printJS({
        printable:this.$refs.cght,
        type:'html',
        header:'',
        targetStyles:['*'],
        scanStyles: false,
        style:style,
        onPrintDialogClose: () => {
          console.log('弹窗关闭');
        },
        onLoadingEnd:()=>{
          console.log('加载完毕')
        }
      })
    },
    priDan3(){
      // this.$printPage(this.$refs.printDan2)
      const style = '@page { margin:10px 0 0 0 } ' +'@media print { #title{ font-size:12px};#title1{ font-size:12px };.name{font-size:10px}  }' ;
      printJS({
        printable:this.$refs.cgsqd,
        type:'html',
        header:'',
        targetStyles:['*'],
        scanStyles: false,
        style:style,
        onPrintDialogClose: () => {
          console.log('弹窗关闭');
        },
        onLoadingEnd:()=>{
          console.log('加载完毕')
        }
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (row.shenhFlag == 0) {
        return 'warning-row';
      } else{
        return '';
      }

    },
    /** 查询采购单列表 */
    getList() {
      this.loading = true;
      //this.queryParams.shenhFlag='1'
      listPurchaseInfo(this.queryParams).then(response => {
        this.purchaseInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        factoryName: null,
        factoryCode: null,
        danhao: null,
        yhDanhao: null,
        asnDanhao: null,
        classId: null,
        className: null,
        itemName: null,
        itemId: null,
        itemCode: null,
        spec: null,
        unit: null,
        txm: null,
        supplyId: null,
        supplyName: null,
        makerCode: null,
        makerName: null,
        contractCode: null,
        contractNum: null,
        contractShare: null,
        totalPrice: null,
        unitPrice: null,
        isTuoguan: null,
        yhNum: null,
        shNum: null,
        rkNum: null,
        hgNum: null,
        thNum: null,
        yhType: null,
        yhCompany: null,
        wlCompany: null,
        dhCompany: null,
        yhTime: new Date(),
        dhStock: null,
        shName: null,
        shKuwei: null,
        shAddress: null,
        ghCompany: null,
        ghDate: null,
        ghAddress: null,
        scDate: null,
        gysYsjl: null,
        gysYssj: null,
        yddNum: null,
        ywcNum: null,
        yghwcbl: null,
        dxrl: null,
        ncgPlanId: null,
        ncgPlanNum: null,
        jcgPlanId: null,
        jcgPlanNum: null,
        ycgPlanId: null,
        ycgPlanNum: null,
        lscgPlanId: null,
        lscgPlanNum: null,
        size: null,
        singleWeight: null,
        totalWeight: null,
        rukuDate: null,
        upLine: null,
        downLine: null,
        stockSafe: null,
        useState: null,
        color: null,
        figure: null,
        caizhi: null,
        isDaizhi: null,
        packingNum: null,
        packingSize: null,
        packingCaizhi: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.seles = selection
      this.dhs = selection.map(item => item.danhao)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增采购计划";
      setTimeout(() => {
        this.$refs.purchaseInfoAdd.purchaseInfoAddListReset();
      }, 10);
    },
    //采购申请
    handleApply(){
      this.reset();
      dictSp().then(response => {
        this.dictSp = response.data;
        this.apply.open = true;
        this.apply.title = "采购单申请";
        setTimeout(() => {
          this.$refs.purchaseInfoApply.purchaseInfoApplyListReset(this.ids);
        }, 10);
      });
    },
    printt(){
      this.reset();
      const id = this.ids
      getPurchaseInfo(id).then(res=>{
        this.info = res.data
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getPurchaseInfo(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改采购单";
        setTimeout(() => {
          this.$refs.purchaseInfoAdd.purchaseInfoEditListReset(response.data);
        }, 10);
      });
    },
    /** 采购单审批 */
    handleShenPi(row) {
      this.reset();
      const id = row.id
      this.shenh.open = true;
      this.shenh.title = "采购单审批";
      this.form.id = id;
      this.form.shenhState="1";
      this.form.shenhFlag="1";
      this.form.shenhTime=new Date();
    },
    /** 采购单审批 */
    handleHt(row) {
      this.reset();
      const id = row.id
      const yhNum = row.yhNum
      this.ht.open = true;
      this.ht.title = "生成采购合同";
      this.form.id = id;
      this.form.contractNum=yhNum;
    },
    submitShenPiForm() {
      shenpiPurchaseInfo(this.form).then(response => {
        this.$modal.alertSuccess("审批成功");
        this.shenh.open = false;
        this.getList();
      });
     /* this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            shenpiPurchaseInfo(this.form).then(response => {
              this.$modal.alertSuccess("审批成功");
              this.shenh.open = false;
              this.getList();
            });
          }
        }
      });*/
    },
    /*生成合同提交*/
    submitHtForm() {
      htScPurchaseInfo(this.form).then(response => {
        this.$modal.alertSuccess("合同生成成功");
        this.ht.open = false;
        this.getList();
      });
      /*this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            htScPurchaseInfo(this.form).then(response => {
              this.$modal.alertSuccess("合同生成成功");
              this.shenh.open = false;
              this.getList();
            });
          }
        }
      });*/
    },
    getSp(value){
      let selectedName = {};
      selectedName = this.dictSp.find((item)=>{
        return item.spCode === value;
        //筛选出匹配数据，是对应数据的整个对象
      });
      this.form.spName=selectedName.spName;
    },
    /** 提交按钮 */
    submitApplyForm() {
      if(this.form.spCode==null || this.form.spCode=="" || this.form.spCode==undefined){
        this.$modal.alertWarning('请选择审批流')
        return;
      }
      let purchaseInfoApplyList= this.$refs.purchaseInfoApply.purchaseInfoApplyList;
      for(let i=0;i<purchaseInfoApplyList.length;i++){
        if(purchaseInfoApplyList[i].yhNum==''||purchaseInfoApplyList[i].yhNum==null||purchaseInfoApplyList[i].yhNum==undefined ||purchaseInfoApplyList[i].yhNum<=0){
          this.$modal.alertWarning('请输入采购数量')
          return;
        }
      }
      this.form.infoList=JSON.parse(JSON.stringify(purchaseInfoApplyList));
      applyPurchaseInfo(this.form).then(response => {
        this.$modal.msgSuccess("申请提交成功");
        this.apply.open = false;
        this.getList();
      });
      /*this.$refs["form"].validate(valid => {
        if (valid) {
          applyPurchaseInfo(this.form).then(response => {
            this.$modal.msgSuccess("申请提交成功");
            this.open = false;
            this.getList();
          });
        }
      });*/
    },
    /** 提交按钮 */
    submitForm() {
      let purchaseInfoAddList= this.$refs.purchaseInfoAdd.purchaseInfoAddList;
      if(purchaseInfoAddList.length==0){
        this.$modal.alertWarning('请选择物料')
        return;
      }
      for(let i=0;i<purchaseInfoAddList.length;i++){
        if(purchaseInfoAddList[i].yhNum==''||purchaseInfoAddList[i].yhNum==null||purchaseInfoAddList[i].yhNum==undefined ||purchaseInfoAddList[i].yhNum<=0){
          this.$modal.alertWarning('请输入采购数量')
          return;
         }
           /*if(purchaseInfoAddList[i].unitPrice==''||purchaseInfoAddList[i].unitPrice==null||purchaseInfoAddList[i].unitPrice==undefined|| purchaseInfoAddList[i].unitPrice<=0){
             this.$modal.alertWarning('请输入采购单价')
             return;
           }*/
      }
      this.form.infoList=JSON.parse(JSON.stringify(purchaseInfoAddList));
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updatePurchaseInfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPurchaseInfo(this.form).then(response => {
              this.$modal.msgSuccess("申请提交成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除采购单编号为"' + ids + '"的数据项？').then(function() {
        return delPurchaseInfo(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('business/purchaseInfo/export', {
        ...this.queryParams
      }, `purchaseInfo_${new Date().getTime()}.xlsx`)
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "导入采购计划";
      this.upload.open = true;

      getLiSupplier().then(response => {
        this.suppers = response.data;
      });

    },
    /** 下载模板操作 */
    /** 下载模板操作 */
    importTemplate() {
      this.download('base/iteminfo/importTemplate', {
      }, `物料信息模板.xlsx`)
    },
    /** 文件上传中处理 */
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    /** 文件上传成功处理 */
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    /** 提交上传文件 */
    submitFileForm() {
      this.$refs["form22"].validate(valid => {
        if (valid) {
          this.form.yhTime = moment.utc(this.form.yhTime).local().format('YYYY-MM-DD')
          this.$refs.upload.submit();
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
  ::v-deep .el-table .warning-row {
    background: #ffe4e1;
  }
</style>
